<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validation demo</title>

<link rel="stylesheet" type="text/css" href="../theme-remote.css" />
<style type="text/css">
body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

#debugPanel pre {
    font-family: "Lucida Console", "Courier New", Courier, monospace;
}

div.container {
    border: 0px solid green;
    margin: 10px;
}
</style>

<script type="text/javascript">
var djConfig = {
    isDebug: true,
    parseOnLoad: true,
    locale: "zh",
    extraLocale: ["en"],
    baseUrl: "../script/dojo-1.4.3/dojo/",
    modulePaths: {
        "demo": "../../../script/demo",
        "com": "../../../script/com"
    }
};
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.3/dojo/dojo.xd.js.uncompressed.js"></script>
<script type="text/javascript" src="../script/dojo-require.js"></script>
<script type="text/javascript" src="../script/utils.js"></script>
<script type="text/javascript">
function debug(messages) {
    var msg = demo.utils._getDebugMsg.apply(null, arguments);
    console.debug(msg);

    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML = msg;
}

function append(messages) {
    var msg = demo.utils._getDebugMsg.apply(null, arguments);

    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML += "\n" + msg;
}

function show(id) {
    demo.utils.show(id);
}

function hide(id) {
    demo.utils.hide(id);
}
</script>
<style type="text/css">
@import "../css/rounded-button.css";
@import "../css/rounded-corners.css";

body {
    padding: 10px;
}

th {
    background-color: #003366;
    color: white;
    font-weight: bold;
}

#bookmarkListDiv table tr:hover {
    background-color: #ABD6FF !important;
}

#bookmarkListDiv table tr.odd {
    background-color: white;
}

#bookmarkListDiv table tr.even {
    background-color: #DDDDDD;
}

.highlight {
    background-color: #FFBBBB !important;
}

/* Override Toaster text style */
.dijitToasterContainer {
    font-size: 1em;
}

#tipMessage {
    max-width: 50%;
    border-width: 1px;
    border-style: solid;
    padding: 2px 15px;
    background-repeat: no-repeat;
    background-position: 5px center;
    opacity: 0; /* initially hidden */
}

#tipMessage.message {
    border: none;
    /* background: url("../images/icons/icon-information-blue.gif");*/
    background-color: #FFF0A8;
}

#tipMessage.success {
    border-color: #4F8A10;
    padding-left: 25px;
    background-image: url("../images/icons/icon-system-status-ok.gif");
    background-color: #DFF2BF;
}

#tipMessage.warning {
    border-color: #9F6000;
    padding-left: 25px;
    background-image: url("../images/icons/icon-system-status-alert.gif");
    background-color: #FEEFB3;
}

#tipMessage.error {
    border-color: #D8000C;
    padding-left: 25px;
    background-image: url("../images/icons/icon-error.gif");
    background-color: #FFBABA;
}

/* Fix IE7 bug when font-size: small */
.dijitTooltipContainer {
   font-size: x-small;
}
</style>
<script type="text/javascript">
if (("demo" in dojo.global) === false) {
    var demo = {};
}

demo.bookmarks = [];
demo.tipMessage = null;
demo.bookmarkTableFormat = "basic";

//////////////////////////////
dojo.ready(function() {
    dojo.byId('version').innerHTML = 'Version ' + dojo.version;

    debug('loaded');

    demo.tipMessage = new dojo.fx.Toggler({
        node: "tipMessage"
    });

    var bookmarkNameTextBox = dijit.byId("bookmarkName");
    bookmarkNameTextBox.promptMessage = "Please enter a new name for your bookmark";
    bookmarkNameTextBox.tooltipPosition = ["before", "below"];

    // check duplicate bookmark
    bookmarkNameTextBox.duplicateBookmarkCheck = function(value) {
        var inputName = value.toUpperCase();
        var bookmarks = demo.bookmarks || [];
        var isBookmarkExisted = dojo.some(bookmarks, function(bookmark) {
            return inputName === bookmark.name.toUpperCase();
        });

        return isBookmarkExisted === false;
    };

    // Overrides dijit.form.ValidationTextBox.isValid to check that the value is also in range.
    bookmarkNameTextBox.isValid = function(isFocused) {
        var value = dojo.trim(this.textbox.value);
        var isValid = this.validator(value, this.constraints);

        if (isValid) {
            isValid = this.duplicateBookmarkCheck(value);
        }

        // highlight in list
        var isHighlight = (demo.bookmarkTableFormat === "basic");
        highlightBookmarkList(value, isHighlight);

        return isValid;
    };

    // Overrides dijit.form.ValidationTextBox.getErrorMessage to print "already a bookmark with this name" message if appropriate
    bookmarkNameTextBox.getErrorMessage = function(isFocused) {
        var value = dojo.trim(this.textbox.value);

        if (value && !this.duplicateBookmarkCheck(value)) {
            return "There is already a bookmark with this name";
        }

        return this.invalidMessage;
    };

    // update submit button after textbox validation
//    dojo.connect(bookmarkNameTextBox, "validate", function() {
//        var submitButton = dijit.byId("saveButton");
//        var value = bookmarkNameTextBox.attr("value");
//
//        var disabled = (dojo.trim(value) === "" || bookmarkNameTextBox.state === "Error") ? true : false;
//        submitButton.attr("disabled", disabled);
//    });

    var randomIndex = demo.utils.randomInt(1, 100);
    bookmarkNameTextBox.attr("value", "Bookmark & " + randomIndex);

    // Load the bookmarks.
    getBookmarks();
});

//////////////////////////////
function submitParentWidget(widget, e) {
    // find parent dialog
    var dialog = null;
    for (var node = widget.domNode.parentNode; node.parentNode; node = node.parentNode) {
        var parentWidget = dijit.byNode(node);
        if (parentWidget && typeof parentWidget._onSubmit === "function") {
            dialog = parentWidget;
            break;
        }
    }

    if (dialog) {
        dialog._onSubmit(e);
    }
}

function onEnterKeyUp(e) {
    var key = e.keyCode;
    if (key === dojo.keys.ENTER) {
        console.debug("capture ENTER key");
        submitParentWidget(this, e);
    }
}

function showToasterMessage(msg, type, duration) {
    var params = {};
    params.message = msg;
    params.type = type || null;
    params.duration = duration || null;

    dojo.publish("toasterMessageTopic", [params]);
}

function showTipMessage(msg, type, duration) {
    var def = new dojo.Deferred();

    var tipMessageNode = dojo.byId("tipMessage");
    dojo.removeClass(tipMessageNode);
    dojo.addClass(tipMessageNode, type || "message");
    dojo.byId("tipMessage").innerHTML = msg;

    var tipMessage = demo.tipMessage;
    tipMessage.show();

    var duration = duration || 0;
    if (duration > 0) {
        // callback when animation ends
        tipMessage.hideAnim.onEnd = function() {
            def.callback();
        };

        // hide after duration
        setTimeout(function() {
            tipMessage.hide();
        }, duration);
    } else {
        // never hide
        setTimeout(function() {
            def.callback();
        }, 10);
    }

    return def;
}

function hideTipMessage() {
    var def = new dojo.Deferred();

    var tipMessage = demo.tipMessage;

    // callback when animation ends
    tipMessage.hideAnim.onEnd = function() {
        def.callback();
    };

    tipMessage.hide();

    return def;
}
////////////////////////////////////////////////////////////
function getBookmarks() {
    // Display the 'loading...' message just in case this takes some time...
    showTipMessage("loading bookmarks...");

    var bookmarks = [];
    var bookmark = null;
    for (var i = 1; i <= 100; i++) {
        bookmark = {};
        bookmark.id = "bookmark_" + i;
        bookmark.name = "Bookmark & " + i;
        bookmarks.push(bookmark);
    }

    // create a deferred
    var deferred = new dojo.Deferred();

    // add callback.
    // TODO: use deferred.then() instead when dojo.version >= 1.5
    deferred.addCallback(function(bookmarks) {

        demo.bookmarks = bookmarks || [];

        if (demo.bookmarkTableFormat === "advanced") {
            // build the grid
            var grid = buildSingleSelectGrid(bookmarks);

            // Set select bookmark handler
            dojo.connect(grid.selection, "onSelected", function() {
                var grid = dijit.byId("bookmarkGrid");
                var selectedCount = grid.selection.getSelectedCount();
                dijit.byId("replaceButton").attr("disabled", (selectedCount > 0) ? false : true);
            });
        } else {
            buildSingleSelectList(bookmarks);
        }

        // hide loading message
        hideTipMessage();

        // Check the current bookmark name to make sure button enabling and field prompt are correct.
        dijit.byId("bookmarkName").validate(true);

        // Since the list has just been repopulated no item will be selected so disable the replace button
        dijit.byId("replaceButton").attr("disabled", true);
    });

    // set deferred to fire in 1 second.
    setTimeout(function() {
        deferred.callback(bookmarks);
    }, 1000);
}

function buildSingleSelectList(bookmarks) {
    var bookmarkList = dojo.byId("bookmarkListDiv");
    // Max list height should accomodate 10 rows. If 5 rows or list set to half height with adjustment for header.
    bookmarkList.style.height = (bookmarks.length <= 5) ? "11em" : "20.3em";

    var tableBody = dojo.query("table tbody", bookmarkList)[0];

    dojo.forEach(bookmarks, function(bookmark, index) {
        var rowNode = dojo.create("tr");
        var radioCell = dojo.create("td", null, rowNode);
        var radioButton = dojo.create("input", {
            id: "radio_" + index,
            type: "radio",
            name: "replaceId",
            value: bookmark.id,
            onclick: function(e) {
                dijit.byId("replaceButton").attr("disabled", false);
                dojo.byId("bookmarkIdHiddenField").value = this.value;
            }
        }, radioCell);
        var indexCell = dojo.create("td", {innerHTML: index + 1 + ""}, rowNode);
        var labelCell = dojo.create("td", null, rowNode);
        var labelNode = dojo.create("label", {"for": "radio_" + index, innerHTML: bookmark.name}, labelCell);
        dojo.place(rowNode, tableBody);
    });

    dojo.query("tr:nth-child(odd)", tableBody).addClass("odd");
    dojo.query("tr:nth-child(even)", tableBody).addClass("even");
}

function equalsIgnoreCase(str1, str2) {
    return dojo.trim(str1).toUpperCase() === dojo.trim(str2).toUpperCase();
}

function highlightBookmarkList(value, enableHighlight) {
    if (enableHighlight === false) {
        return;
    }

    var bookmarkList = dojo.byId("bookmarkListDiv");
    var rows = dojo.query("table tbody tr", bookmarkList);
    var scrollTopOffset = 0; // scrollTop offset

    dojo.forEach(rows, function(row, index) {
        // set scrollTopOffset
//        if (index === 0) {
//            scrollTopOffset = dojo.marginBox(row).t;
//        }

        // clear highlight effect
        dojo.removeClass(row, "highlight");

        var labelNode = dojo.query("td:last-child label", row)[0];
        var label = labelNode.textContent || labelNode.innerText;

        if (equalsIgnoreCase(value, label)) {
            // apply highlight effect
            dojo.addClass(row, "highlight");

            // scroll to highlighted row
            var rowCoords = dojo.marginBox(row);
            var rowTop = rowCoords.t - scrollTopOffset;
            var rowBottom = rowTop + rowCoords.h;

            var scrollBox = bookmarkList; // div#bookmarkListDiv
            var scrollBoxCoords = dojo.marginBox(scrollBox);
            var visibleTopMin = scrollBox.scrollTop;
            var visibleTopMax = scrollBox.scrollTop + scrollBoxCoords.h;

            if (rowTop < visibleTopMin || rowBottom > visibleTopMax) {
                // scroll to the 3rd row of scrollable container if possible
                var topOffset = rowCoords.h * 2;
                targetTop = (rowTop - topOffset > 0) ? (rowTop - topOffset) : rowTop;

                //console.debug("scroll", rowTop, visibleTopMin, visibleTopMax);
                scrollBox.scrollTop = targetTop;
            }
        }
    });
}

function saveBookmark() {
    var form = dijit.byId("dijitFormSaveBookmark");
    var formContents = form.attr("value");
    var name = formContents["name"];
    console.debug(name);

    var def = showTipMessage("The bookmark has been saved.", "success", 1000);
    def.addCallback(function() {
        dijit.byId("saveButton").attr("disabled", false);
    });
}

function replaceBookmark() {
    var form = dijit.byId("dijitFormSaveBookmark");
    var id = dojo.byId("bookmarkIdHiddenField").value;
    console.debug(id);

    var def = showTipMessage("The bookmark has been replaced.", "success", 1000);
    def.addCallback(function() {
        dijit.byId("replaceButton").attr("disabled", false);
    });
}

function doValidation() {
    var form = dijit.byId("dijitFormValidation");
    var formContents = form.attr("value");
    var name = formContents["name"];

    var isValid = name.length % 2 !== 0;

    var deferred = new dojo.Deferred();
    deferred.addBoth(function(result) {
        var isValid = (result instanceof Error) === false;
        var message = isValid ? "The name is valid." : result.message;
        var mesageType = isValid ? "success" : "error";

        if (!isValid) {
            var nameTextBox = dijit.byId("name");
            var _showTextBoxErrorMessage = dojo.hitch(nameTextBox, function(message) {
                // NOTE: code of this function are from dijit.form.ValidationTextBox.validate method,
                // it need to change when Dojo get upgrade.
                this.tooltipPosition = ["before", "below"];
                this.state = "Error";
                this._maskValidSubsetError = false;
                this._setStateClass();
                dijit.setWaiState(this.focusNode, "invalid", "true");
                this.displayMessage(message);
            });
            _showTextBoxErrorMessage(message);
        }

        var def = showTipMessage(message, mesageType, 1000);
        def.addCallback(function() {
            dijit.byId("validateButton").attr("disabled", false);
        });
    });

    setTimeout(function() {
        if (isValid) {
            deferred.callback("true");
        } else {
            deferred.errback(new Error("Invalid name."));
        }
    }, 1000);
}
</script>
</head>
<body class="tundra">

  <h2 id="version">Unknown Version</h2>

  <div id="main" class="container">

    <div id="titlePanel" dojoType="dijit.TitlePane" title="Panel" style="">
      <div id="resizablePanel" style="position:relative; padding: 10px; border:1px solid black;">

        <!-- Content -->
        <div class="content">
          <div style="padding: 5px; width: 50em; background-color: #DFFFDF;">
            <h1>dojox.validate</h1>
            <div id="dijitForm" dojoType="dijit.form.Form" action="" method="post">
              <h3>Enter a name</h3>
              <table width="100%">
                <tbody>
                  <tr>
                    <td style="white-space: nowrap; width: 4em;"><label for="firstname">Name:</label></td>
                    <td><input type="text" required="true" id="firstname" name="firstname" dojoType="dijit.form.ValidationTextBox" title="Modify the name and click Validate" promptMessage="Please enter a name." trim="true" /></td>
                  </tr>
                  <tr>
                    <td><label for="email">Email:</label></td>
                    <td><input type="text" required="true" id="email" name="email" dojoType="dijit.form.ValidationTextBox" validator="dojox.validate.isEmailAddress" promptMessage="Please enter an email address." trim="true" /></td>
                  </tr>
                  <tr>
                    <td><label for="ip">IP:</label></td>
                    <td><input type="text" required="true" id="ip" name="ip" dojoType="dijit.form.ValidationTextBox" validator="dojox.validate.isIpAddress" promptMessage="Please enter a IP address." trim="true" /></td>
                  </tr>
                </tbody>
              </table>
              <div style="float: right; padding: 1em;">
                <button id="submitButton1" dojoType="dijit.form.Button" type="submit" title="Validate the name">Validate</button>
              </div>
              <script type="dojo/method" event="onSubmit" args="e">
                var submitButton = dijit.byId("submitButton1");

                if (this.isValid() === true && submitButton.attr("disabled") === false) {
                    submitButton.attr("disabled", true);
                    showTipMessage("Form is valid, submitting!", "success", 1000);
                }

                return false;
              </script>
            </div>
            <div class="hrule-dots" style="display: block; clear: both; margin: 0.5em 0;"></div>
          </div>

          <div style="padding: 5px; width: 50em; background-color: #E0E0FF;">
            <h1>Async ValidationTextBox</h1>
            <div id="dijitFormValidation" dojoType="dijit.form.Form" action="" method="post">
              <h3>Enter a name</h3>
              <table width="100%">
                <tbody>
                  <tr>
                    <td style="white-space: nowrap; width: 4em;"><label for="name">Name:</label></td>
                    <td><input type="text" id="name" name="name" dojoType="dijit.form.ValidationTextBox" title="Modify the name and click Validate" value="" required="false" trim="true" style="width: 100%;" /></td>
                    <td style="width: 1.2em;">&nbsp;</td>
                  </tr>
                </tbody>
              </table>
              <div style="float: right; padding: 1em;">
                <button id="validateButton" dojoType="dijit.form.Button" type="submit" title="Validate the name">Validate</button>
              </div>
              <script type="dojo/method" event="onSubmit" args="e">
                var submitButton = dijit.byId("validateButton");

                if (this.isValid() === true && submitButton.attr("disabled") === false) {
                    submitButton.attr("disabled", true);
                    doValidation();
                }

                return false;
              </script>
            </div>
            <div class="hrule-dots" style="display: block; clear: both; margin: 0.5em 0;"></div>
          </div>

          <div style="position: relative; padding: 5px; width: 50em; background-color: #EAF4FC;">

            <!-- Tip Message -->
            <div id="tipMessage" style="position:absolute;top:0;right:0;">this is the tip message</div>

            <!-- Instruction -->
            <h1>Save bookmark</h1>
            <p>Enter or modify the bookmark name and then choose a Save option to create a new bookmark, or select an existing bookmark to replace and then choose a Replace option.</p>

            <!-- Save new bookmark -->
            <div id="dijitFormSaveBookmark" dojoType="dijit.form.Form" action="" method="post">
              <h3>Save a new bookmark</h3>
              <table width="100%">
                <tbody>
                  <tr>
                    <td style="white-space: nowrap; width: 4em;"><label for="bookmarkName">Name:</label></td>
                    <td><input type="text" id="bookmarkName" name="name" dojoType="dijit.form.ValidationTextBox" title="Modify the name of this bookmark and select Save" value="" required="true" trim="true" style="width: 100%;" /></td>
                    <td style="width: 1.2em;">&nbsp;</td>
                  </tr>
                </tbody>
              </table>
              <div style="float: right; padding: 1em;">
                <button id="saveButton" dojoType="dijit.form.Button" type="submit" title="Save the bookmark with the supplied name">
                    Save bookmark
                    <script type="dojo/method" event="startup">
                        var form = dijit.byId("dijitFormSaveBookmark");
                        //  set initial state
                        this.attr("disabled", !form.isValid());
                        this.connect(form, "onValidStateChange", function(state) {
                            this.attr("disabled", !state);
                        });
                    </script>
                </button>
              </div>
              <script type="dojo/method" event="onSubmit" args="e">
                var submitButton = dijit.byId("saveButton");

                if (this.isValid() === true && submitButton.attr("disabled") === false) {
                    submitButton.attr("disabled", true);
                    saveBookmark();
                }

                return false;
              </script>
            </div>

            <div class="hrule-dots" style="display: block; clear: both; margin: 0.5em 0;"></div>

            <!-- Replace a bookmark -->
            <div id="dijitFormReplaceBookmark" dojoType="dijit.form.Form" action="" method="post">
              <h3>Replace an existing bookmark</h3>
              <div id="bookmarkListDiv" style="overflow-x: hidden; overflow-y: auto;">
                <table style="width: 100%;" border="1" cellspacing="1" cellpadding="0">
                  <thead>
                    <tr>
                      <th style="width: 2em;"></th>
                      <th style="width: 4em;">#</th>
                      <th>Bookmark</th>
                    </tr>
                  </thead>
                  <tbody></tbody>
                </table>
              </div>
              <div id="bookmarkGrid"></div>
              <input id="bookmarkIdHiddenField" type="hidden" name="bookmarkId" />
              <div style="float: right; padding: 1em;">
                <button id="replaceButton" dojoType="dijit.form.Button" type="submit" title="Replace the selected bookmark">Replace bookmark</button>
              </div>
              <script type="dojo/method" event="onSubmit" args="e">
                var submitButton = dijit.byId("replaceButton");

                if (this.isValid() === true && submitButton.attr("disabled") === false) {
                    submitButton.attr("disabled", true);
                    replaceBookmark();
                }

                return false;
              </script>
            </div>
            <div class="hrule-dots" style="display: block; clear: both; margin: 0.5em 0;"></div>

          </div>

        </div>

        <!-- Resize Handle -->
        <div id="resizeHandle" dojoType="dojox.layout.ResizeHandle" targetId="resizablePanel"></div>
      </div>
    </div>

    <!-- Button Panel -->
    <div dojoType="dojo.dnd.Moveable">
      <div id="buttonPanel" dojoType="dijit.TitlePane" title="Button Panel" style="">
        <!-- Button: hide message -->
        <button dojoType="dijit.form.Button" title="Click to hide tip message" onClick="hideTipMessage();">Hide tip message</button>

        <!-- Button: message tip -->
        <button dojoType="dijit.form.Button" title="Click to show message tip" onClick="showTipMessage('Information Messages', 'message', 3000);">Message tip</button>

        <!-- Button: success tip -->
        <button dojoType="dijit.form.Button" title="Click to show success tip" onClick="showTipMessage('Success Messages', 'success', 1000);">Success tip</button>

        <!-- Button: warning tip -->
        <button dojoType="dijit.form.Button" title="Click to show warning tip" onClick="showTipMessage('Warning Messages', 'warning', 0);">Warning tip</button>

        <!-- Button: error tip -->
        <button dojoType="dijit.form.Button" title="Click to show error tip" onClick="showTipMessage('Error Messages', 'error', 0);">Error tip</button>

        <!-- DropDown Button with TooltipDialog -->
        <button dojoType="dijit.form.DropDownButton" title="Click to show TooltipDialog">
          <span>DropDownButton with TooltipDialog</span>
          <!-- TooltipDialog -->
          <div dojoType="dijit.TooltipDialog">
            <label for="nameTextBox2">Name:</label> <input dojoType="dijit.form.TextBox" id="nameTextBox2" name="name" />
            <span id="saveButton2" dojoType="dijit.form.Button" type="submit" title="Save">Save
              <script type="dojo/method" event="onClick">
                var nameWidget = dijit.byId("nameTextBox2");
                var name = nameWidget.attr("value");
                debug("name:", name);
              </script>
            </span>
          </div>
        </button>

        <button dojoType="dijit.form.DropDownButton" title="Click to show Menu">
          <span>DropDownButton with Menu</span>
          <!-- Menu -->
          <div dojoType="dijit.Menu" id="menu" style="display: none;">
            <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut" onClick="alert('Cut!')">Cut</div>
            <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy" onClick="alert('Copy!')">Copy</div>
            <div dojoType="dijit.MenuSeparator"></div>
            <div dojoType="dijit.PopupMenuItem">
              <span>Popup ColorPalette</span>
              <div dojoType="dijit.ColorPalette"></div>
            </div>
          </div>
        </button>
      </div>
    </div>
  </div>

  <!-- Debug Panel -->
  <div id="debugPanel" dojoType="dojox.layout.FloatingPane" title="Console" resizable="true" dockable="true" style="position: absolute; bottom: 20px; right: 20px; width: 500px; height: 150px;">
    <pre id="debugPanelContent"></pre>
  </div>

  <div id="instruction_1" dojoType="dojox.layout.FloatingPane" title="Help" resizable="true" dockable="true" style="position: absolute; top: 20px; right: 20px; width: 300px;">
    node.innerHTML will convert "&" to "&amp;". To get the raw text, Firefox uses textContent, IE uses innerText and Chrome uses both. 
    <pre>
var label = labelNode.textContent || labelNode.innerText;
    </pre>
  </div>

  <!-- Popup Dialog -->
  <div dojoType="dijit.Dialog" id="dialog" title="Dialog" style="display: none;">
    <button id="okButton" dojoType="dijit.form.Button" title="OK"  onClick="alert('OK!');">OK</button>
    <button id="cancelButton" dojoType="dijit.form.Button" title="Cancel" onClick="dijit.byId('dialog').hide();">Cancel</button>
  </div>

  <!-- Toaster -->
  <div dojoType="dojox.widget.Toaster" id="toaster" positionDirection="br-up" messageTopic="toasterMessageTopic"></div>
</body>
</html>
